<template>
    <div>
        <el-form :model="abilityForm" label-width="100px" style="overflow:hidden" :rules="abilityRule" ref="abilityRule">
            <el-form-item label="属性" prop="attribute">
                <el-select value-key="attrId" placeholder="请选择属性名" v-model="abilityForm.attribute" style="width:55%!important;">
                    <el-option v-for="i in attributeList" :key="i.attrId" :label="i.attrName" :value="i"></el-option>
                </el-select>
                <el-button style="margin-left:10px;height: 40px" class="is-top" size="small" @click="ability_activeVisitable=true">
                    <i class="iconfont icon-jiahao" > 添加新属性</i>
                </el-button>
            </el-form-item>
            <el-form-item prop="abilityName" label="属性值">
                  <el-input v-model="abilityForm.abilityName" autocomplete="off"  style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label-width="250px" style="width:100%;margin-top:30px;">
                <el-button type="primary" @click="addAbility('abilityRule')">保 存</el-button>
                <el-button @click="cancel">取 消</el-button>
            </el-form-item>
        </el-form>
        <!--新增属性-->
        <el-dialog title="新增属性" width="30%" :visible.sync="ability_activeVisitable"  :modal="false" :close-on-click-modal="false">
            <el-form :model="attributeForm" style="overflow: hidden" :rules="attrRule" ref="attrRule">
                <el-form-item prop="attrName" label="属性名">
                    <el-input v-model="attributeForm.attrName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label-width="100px" style="width:100%;margin-top:60px;">
                    <el-button type="primary" @click="addAttr('attrRule')">保 存</el-button>
                    <el-button @click="clearAttributeForm(),ability_activeVisitable = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "add_new_attribute",
        data(){
            return{
                //产品属性名数据
                attributeList:[],
                //添加产品属性名数据
                attributeForm:{
                    attrId:'',
                    attrName:'',
                },
                //添加产品属性值数据
                abilityForm:{
                    abilityId:'',
                    abilityName:'',
                    attribute:[]
                },
                //新增产品属性名弹框状态
                ability_activeVisitable:false,
                //新增属性规则
                attrRule: {
                    attrName: [
                        { required: true, message: '请输入属性名', trigger: 'blur' }
                    ]
                },
                //新增属性值规则
                abilityRule: {
                    attribute: [
                        { required: true, message: '请选择属性名', trigger: 'blur' }
                    ],
                    abilityName: [
                        { required: true, message: '请输入属性值', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            //产品属性查询
            attribute(){
                this.axios.get("api/product/attribute-list").then(v=>{
                    this.attributeList=v.data;
                }).catch()
            },
            //新增属性
            addAttr(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.post("api/product/add-attribute", this.attributeForm)
                            .then(v => {
                                window.console.log(v)
                                this.attribute();
                                this.clearAttributeForm();
                                this.global.mes_success("新增成功");
                                this.ability_activeVisitable = false;
                                }
                            ).catch()
                    }else {
                        this.global.mes_warning("属性名不能为空！")
                        return false;
                    }
                });
            },
            //新增属性值
            addAbility(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        window.console.log(this.abilityForm);
                        this.axios.post("api/product/add-ability", this.abilityForm)
                            .then(v => {
                                window.console.log(v);
                                this.$store.state.vueAddAttribute.attribute();
                                this.global.mes_success("新增成功");
                                this.cancel();
                                }
                            ).catch()
                    }else {
                        this.global.mes_warning("请正确填写属性")
                        return false;
                    }
                });
            },
            //清空数据
            clearAttributeForm(){
                this.attributeForm={
                    attrId:0,
                    attrName:'',
                }
            },
            clearAbilityForm(){
                this.abilityForm={
                    abilityId:0,
                    abilityName:'',
                    attrId:''
                }
            },
            //取消新增
            cancel(){
                this.clearAttributeForm();
                this.clearAbilityForm();
                this.$store.state.vueAddAttribute.addNewAttribute = false;
            },
        },
        created(){
            this.attribute();
        }
    }
</script>

<style scoped>

</style>